<template>
  <div>
    <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
      <a-card :bordered="false" style="height: calc(100vh - 125px)">
        <a-form-model ref="form" :model="approveRecord" :rules="rules" slot="title">
          <a-row v-if="operatorApply">
            <a-col :span="16" style="height: 10px; margin-right: 10px">
              <a-form-model-item prop="reason">
                <a-select
                  style="width: 100%"
                  show-search
                  :allowClear="true"
                  :value="approveRecord.reason"
                  placeholder="审核原因"
                  :default-active-first-option="false"
                  :show-arrow="false"
                  :filter-option="false"
                  :not-found-content="fetching ? undefined : null"
                  @focus="handleFocus"
                  @search="handleSearch"
                  @change="handleChange"
                  @blur="handleBlur"
                >
                  <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                  <a-select-option v-for="(d, index) in reasonList" :key="index">
                    {{ d }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-space>
                <a-button type="primary" icon="check" @click="submitForm(true)"> 通过 </a-button>
                <a-button type="danger" icon="close" @click="submitForm(false)"> 拒绝 </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form-model>
        <a-descriptions v-if="operatorApply" title="用户信息" bordered :column="2" style="margin: 10px">
          <a-descriptions-item label="头像">
            <a-avatar shape="square" :src="imageUrl + operatorApply.avatar" />
          </a-descriptions-item>
          <a-descriptions-item label="名字"> {{ operatorApply.name }} </a-descriptions-item>
          <a-descriptions-item label="账号"> {{ operatorApply.userName }} </a-descriptions-item>
          <a-descriptions-item label="性别"> {{ sexFormat(operatorApply) }} </a-descriptions-item>
          <a-descriptions-item label="手机号"> {{ operatorApply.phonenumber }} </a-descriptions-item>
          <a-descriptions-item label="邮箱"> {{ operatorApply.email }} </a-descriptions-item>
        </a-descriptions>
        <a-descriptions v-if="userRecord" title="用户数据" bordered style="margin: 10px">
          <a-descriptions-item label="地区" :span="3"> {{ userRecord.regionName }} </a-descriptions-item>
          <a-descriptions-item label="发帖数"> {{ userRecord.publishPostNumber }} </a-descriptions-item>
          <a-descriptions-item label="发评数"> {{ userRecord.publishCommentNumber }} </a-descriptions-item>
          <a-descriptions-item label="浏览数"> {{ userRecord.postNumber }} </a-descriptions-item>
          <a-descriptions-item label="评论数"> {{ userRecord.commentNumber }} </a-descriptions-item>
          <a-descriptions-item label="点赞数"> {{ userRecord.likeNumber }} </a-descriptions-item>
          <a-descriptions-item label="收藏数"> {{ userRecord.collectNumber }} </a-descriptions-item>
          <a-descriptions-item label="被评论数"> {{ userRecord.beCommentNumber }} </a-descriptions-item>
          <a-descriptions-item label="被赞数"> {{ userRecord.beLikeNumber }} </a-descriptions-item>
          <a-descriptions-item label="被收藏数"> {{ userRecord.beCollectNumber }} </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { listOperatorApply, approveOperatorApply } from '@/api/platform/operatorApply'
import { listApproveConfig } from '@/api/platform/approveConfig'
import { listUserRecord } from '@/api/platform/userRecord'
import OperatorApplyApprove from './OperatorApplyApprove'
export default {
  name: 'OperationApplyDetail',
  props: {
    operatorApplyId: {
      type: String,
      required: false
    },
    sexOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      //图片链接
      imageUrl: process.env.VUE_APP_BASE_API,
      spinning: false,
      delayTime: 100,
      operatorApply: undefined,
      userRecord: undefined,
      fetching: false,
      approveRecord: {
        itemId: undefined,
        reason: undefined,
        type: undefined
      },
      reasonList: [],
      rules: {
        reason: [{ required: true, message: '审核原因不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    operatorApplyId: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.initData()
        } else {
          this.reset()
        }
      }
    }
  },
  created() {},

  methods: {
    ...OperatorApplyApprove.methods,
    initData() {
      this.spinning = !this.spinning
      this.$refs.form.resetFields()
      this.operatiorApply = undefined
      listOperatorApply({ id: this.operatorApplyId }).then(response => {
        this.operatorApply = response.data.rows[0]
        this.selectUserRecord()
      })
    },
    selectUserRecord() {
      listUserRecord({ userId: this.operatorApply.userId }).then(response => {
        if (response.data) {
          this.userRecord = response.data.rows[0]
        }
        this.spinning = !this.spinning
      })
    },
    reset() {
      this.operatorApply = undefined
      this.userRecord=undefined
      this.approveRecord = {
        itemId: undefined,
        reason: undefined,
        type: undefined
      }
    },
    submitForm(flag) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.approveRecord.itemId = this.operatorApplyId
          if (flag) {
            this.approveRecord.type = '0'
          } else {
            this.approveRecord.type = '1'
          }
          const saveForm = JSON.parse(JSON.stringify(this.approveRecord))
          approveOperatorApply(saveForm).then(response => {
            this.$message.success('审核成功', 3)
            this.reset()
            this.$emit('getList')
          })
        }
      })
    },
    handleBlur(value) {
      this.approveRecord.reason = value
    },
    handleChange(value) {
      this.approveRecord.reason = this.reasonList[value]
    },
    handleSearch(value) {
      this.approveRecord.reason = value
    },
    handleFocus() {
      const queryParam = {
        pageNum: 1,
        pageSize: 10,
        key: 'approve_reason',
        status: '0'
      }
      this.fetching = !this.fetching
      listApproveConfig(queryParam).then(response => {
        const reason = response.data.rows[0]
        this.reasonList = reason.sentence.split(',')
        this.fetching = !this.fetching
      })
    }
  }
}
</script>
